<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>title</h2>
    <div id="box">
        <p>1</p>
        <div>2</div>
        <h1>3</h1>
    </div>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <script>
        // var container = document.getElementById("container");
        // if(container != null)//对象检测，
        //     container.innerHTML = "456";
        let oDiv = document.querySelector("#box");
        //oDiv.innerHTML = "456";
        console.log(oDiv);
        

        //获取多个DOM节点
        let oBtns = document.querySelectorAll("button");
        console.log(oBtns);
        for(let i=0;i < oBtns.length;i++){
            oBtns[i].innerHTML = "hello";
        }
        //打印div一共几个子节点
       console.log(oDiv.childElementCount);//只计算元素节点
       //查找父节点
       console.log(oDiv.parentElement);
       //查找兄弟节点
       console.log(oDiv.previousElementSibling);
       console.log(oDiv.nextElementSibling);
       
       
        
    </script>
</body>
</html>